<template>
  <div class="user-page">
    <!-- 用户信息 -->
    <div class="user-view">
      <div class="user-info">
        <div class="user-avatar">
          <n-avatar round :size="80" :src="userInfo.avatar" />
        </div>
        <div class="info">
          <div class="user-name">{{ userInfo.account }}</div>
          <div class="user-permissions">{{ userInfo.permissions }}</div>
        </div>
      </div>
      <div class="line border" @click="gotoPage('/m/info')">
        <div class="title">用户信息</div>
        <icons class="icon" name="jiantouyou" />
      </div>
      <div class="line border" @click="gotoPage('/m/product')">
        <div class="title">产品信息</div>
        <icons class="icon" name="jiantouyou" />
      </div>
      <div class="line" @click="gotoPage('/m/power')">
        <div class="title">用户权限</div>
        <icons class="icon" name="jiantouyou" />
      </div>
    </div>
    <div class="btn-box">
      <div class="btn-item border" @click="logOut">切换用户</div>
      <div class="btn-item" @click="logOut">注销</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted } from "vue";
import Cookies from "js-cookie";
import { useRouter } from "vue-router";
import { useAppStore } from "@/store/modules/user";
const store = useAppStore();
const router = useRouter();
const userInfo = computed(() => store.userInfo); //用户信息

const gotoPage = (path: string) => {
  router.push(path);
};
const logOut = () => {
  Cookies.remove("token");
  Cookies.remove("userInfo");
  localStorage.clear();
  // window.location.reload();
  router.replace("login");
};
onMounted(() => {});
</script>
<style lang="less" scoped>
.user-page {
  background: #28323a;
  height: calc(100vh - 6rem);
  overflow: hidden;
  .user-view {
    background: #5d6a73;
  }
}
.user-info {
  display: flex;
  padding: 1.2rem;
  align-items: center;

  .info {
    text-align: left;
    margin-left: 0.8125rem;
    .user-name {
      font-size: 1.125rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 1.56rem;
    }
    .user-permissions {
      font-size: 0.775rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #b3b6c9;
      line-height: 1.25rem;
    }
  }
}
.line {
  &.border {
    border-bottom: 2px solid #000000;
  }
  margin-left: 1.2rem;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  .title {
    font-size: 0.875rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  .icon {
    margin-right: 1.2rem;
  }
}
.btn-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #5d6a73;
  .btn-item {
    &.border {
      border-bottom: 1px solid #8b8b8b;
    }
    color: #ffffff;
    padding: 1rem;
  }
}
</style>
